<template>
    <inner-layout v-loading="loading">
        <div class="list-wrap">
            <el-table :data="dataList" :default-sort="{prop: 'pb_percentile', order: 'ascending'}" stripe style="width:100%">

                <el-table-column label="代码">
                    <template slot-scope="scope">
                        <div class="link" @click="eventShowDetail(scope.row.index_code)">{{ scope.row.index_code }}</div>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    label="名称">
                </el-table-column>

                <el-table-column
                    prop="pb"
                    label="PB"
                    sortable
                    >
                </el-table-column>
                <el-table-column
                    prop="pb_percentile"
                    label="PB百分位"
                    sortable
                    :formatter="formatter"
                    >
                </el-table-column>

                <el-table-column
                    prop="pe"
                    label="PE"
                    sortable
                    >
                </el-table-column>
                <el-table-column
                    prop="pe_percentile"
                    label="PE百分位"
                    sortable
                    :formatter="formatter"
                    >
                </el-table-column>

                <el-table-column
                    prop="yeild"
                    label="股息率"
                    sortable
                    :formatter="formatter"
                    >
                </el-table-column>

                <el-table-column
                    prop="roe"
                    label="ROE"
                    sortable
                    :formatter="formatter"
                    >
                </el-table-column>

            </el-table>
        </div>

        <div class="tip-wrap">
            <div>
                <el-switch
                v-model="showAll"
                active-text="显示全部"
                @change="switchShowAll"></el-switch>
            </div>
            <div class="fr">
                <i class="el-icon-info"></i>
                <a href="https://danjuanapp.com/djmodule/value-center?channel=1300100141" target="_blank">数据来源：蛋卷&gt;&gt;</a>
            </div>
        </div>
    </inner-layout>
</template>

<script>
    import { getDjIndexEvaList } from '@/api/danjuanapp'
    export default {
    	name: 'IndexValuation',
    	components: { },
        directives: { },
    	mixins: [],
    	data() {
    		return {
    			loading: false,
                // showSymbolList: ['SH000016','SH000300','SH000905','SZ399001','SH000852','SZ399006','SH000688','SZ399986','SZ399975','SZ399998','SZ399971','SH000991','CSIH30533','SZ399396','SZ399967'],
    			showSymbolList: ['SH000016','SH000300','SH000905','SZ399001','SH000852','SZ399006','SH000688'],
    			dataList: [],
                dataFullList: [],
                showAll: false
    		}
    	},
    	created() {
    		this.getPageData()
    	},
    	methods: {
    		getPageData() {
                let that = this
                that.loading = true
                that.dataList = []
                getDjIndexEvaList().then(res => {
                    let _data = res.data
                    if (_data.result_code === 0 && _data.data) {
                        let _items = _data.data.items || []
                        that.dataFullList = _items
                        that.switchShowAll()
                    }
                }).finally(() => {
                    console.info('getDjIndexEvaList--finally() is executing!');
                    that.loading = false
                })
    		},
            filterData() {
                this.getPageData()
            },
            eventShowDetail(symbol) {
                let that = this
                that.$router.push({
                    name: 'IndexValuationDetail',
                    query: {
                        symbol: symbol
                    }
                })
            },
            formatter(row, column) {
                // console.log('formatter', row, column)
                return (row[column.property] * 100).toFixed(2);
            },
            switchShowAll() {
                let that = this
                if (that.showAll) {
                    that.dataList = that.dataFullList
                } else {
                    that.dataList = []
                    that.dataFullList.forEach((item, index) => {
                        if (that.showSymbolList.indexOf(item.index_code) > -1) {
                            that.dataList.push(item)
                        }
                    })
                }
            }
    	}
    }
</script>

<style lang="scss" scoped>
    .list-wrap {
        margin-top: 30px;
    }
    .tip-wrap {
        padding: 30px 0;
        font-size: 13px;
        line-height: 26px;
    }
    .link {
        cursor: pointer;
    }
</style>
